<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>王者荣耀</title>
</head>
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/swiper.min.css">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/index1.css">

<body>
    <div class="wrap">
        <!-- 头部start -->
        <div class="home_top">
            <div class="logo_cont">
                <a class="logo_img" href="./index.html">
                        <img src="./images/logo.png" alt="LOGO">
                    </a>
                <div class="logo_title">
                    <h1>王者荣耀</h1>
                    <p>王者相见，打成一片</p>
                </div>
            </div>
            <div class="download">
                <a href="#"></a>
            </div>
        </div>
        <div class="content">
            <!-- 轮播图 -->
            <div class="swiper-container">
                <div class="swiper-wrapper" style="transform: translate3d(-375px, 0px, 0px); transition-duration: 0ms;">
                    <div class="swiper-slide swiper-slide-prev" style="width: 375px;">
                        <img src="./picture/1.jpg" alt="王者猴教学">
                        <h2>王者猴教学</h2>
                    </div>
                    <div class="swiper-slide swiper-slide-active" style="width: 375px;">
                        <img src="./picture/2.jpg" alt="KPL战报">
                        <h2>KPL战报</h2>
                    </div>
                    <div class="swiper-slide swiper-slide-next" style="width: 375px;">
                        <img src="./picture/3.jpg" alt="芈月英雄专题">
                        <h2>芈月英雄专题</h2>
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
            <!-- 菜单栏 -->
            <div class="home_nav clearfix">
                    <ul>
                        <li>
                            <a href="#">
                                <i class="icon_1"></i>
                                <span>英雄介绍</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <span>活 动</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">                    
                                <i></i>
                                <span>赛 事</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <span>体验服</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <span>资 讯</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <span>社 区</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <span>新 手</span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <i></i>
                                <span>故事站</span>
                            </a>
                        </li>
                    </ul>
                </div>
            <!-- 热点资讯 -->
            <div class="index_cont">
                <div class="index_cont_title">
                    <span class="ico_news"></span>
                    <h3>热点资讯</h3>
                    <a href="#"  class="ico_more">more</a>
                </div>
                <ul class="news_list">
                    <li>
                        <a href="#" >
                                <span class="category">新闻</span>
                                <span class="split">|</span>
                                <span class="title">妲己情报站——新版本大爆料！社交优化抢先看</span>
                                <span class="time">06/21</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" >
                                <span class="category">赛事</span>
                                <span class="split">|</span>
                                <span class="title">KPL每周话题：四强出炉，谁主沉浮？</span>
                                <span class="time">06/21</span>
                        </a>
                    </li>
                    <li>
                        <a href="#" >
                                <span class="category">公告</span>
                                <span class="split">|</span>
                                <span class="title">6月20日全服不停机更新公告</span>
                                <span class="time">06/20</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- 精彩视频 -->
            <div class="index_cont">
                <div class="index_cont_title">
                    <span class="ico_video"></span>
                    <h3>精彩视频</h3>
                    <a href="#">
                        class="ico_more">more</a>
                </div>
                <ul class="video_list clearfix">
                    <li>
                        <a href="">
                                <img src="./picture/0.jpg" alt="【荣耀时刻】Shadow强势五杀 联赛时长再刷新">
                                <span class="ico_play"></span>
                                <span class="video_title">KPL第一周 ESTAR气势KPL第一周 </span>
                            </a>
                    </li>
                    <li>
                        <a href="">
                                <img src="./picture/0.jpg" alt="【荣耀时刻】Shadow强势五杀 联赛时长再刷新">
                                <span class="ico_play"></span>
                                <span class="video_title">KPL第一周 ESTAR气势</span>
                            </a>
                    </li>
                    <li>
                        <a href="">
                                <img src="./picture/0.jpg" alt="【荣耀时刻】Shadow强势五杀 联赛时长再刷新">
                                <span class="ico_play"></span>
                                <span class="video_title">KPL第一周 ESTAR气势KPL第一周 </span>
                            </a>
                    </li>
                    <li>
                        <a href="">
                                <img src="./picture/0.jpg" alt="【荣耀时刻】Shadow强势五杀 联赛时长再刷新">
                                <span class="ico_play"></span>
                                <span class="video_title">KPL第一周 ESTAR气势</span>
                            </a>
                    </li>
                </ul>
            </div>

            <!--精品攻略-->
            <div class="index_cont stategy_index_cont">
                <div class="index_cont_title">
                    <span class="ico_strategy"></span>
                    <h3>精品攻略</h3>
                    <a href="#" class="ico_more">more</a>
                </div>
                <ul class="strategy_list">
                    <li>
                        <a href="#" class="strategy_pic">
                            <img src="./picture/index1.jpg" alt="KPL每周话题：四强出炉，谁主沉浮？">
                        </a>
                        <div class="strategy_cont">
                            <a href="#"><span class="strategy_title">KPL每周话题：四强出炉，谁主沉浮？</span><span class="strategy_desc">KPL每周话题：四强出炉，谁主沉浮？</span><span class="strategy_num">947<span class="ico_read_num"></span></span><span class="strategy_time">06-21</span></a>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="strategy_pic">
                            <img src="./picture/index2.jpg" alt="《集结吧！王者》分组曝光，田亮秒选叶一茜">
                        </a>
                        <div class="strategy_cont">
                            <a href="#"><span class="strategy_title">《集结吧！王者》分组曝光，田亮秒选叶一茜</span><span class="strategy_desc">相信很多人都看到了微博上田亮叶一茜夫妇、胡夏、吴昕、李诞等人发了《集结吧！王者》的个人宣传海报，这档节目将在6月28日播出。他们将作为队长带领着各自的王者队伍进行魔鬼训练，冲击KPL冠军杯总决赛。</span><span class="strategy_num">868<span class="ico_read_num"></span></span><span class="strategy_time">06-21</span></a>
                        </div>
                    </li>
                    <li>
                        <a href="#" class="strategy_pic">
                            <img src="./picture/index3.jpg" alt="【头像走一波】第98期：忍者赵云">
                        </a>
                        <div class="strategy_cont">
                            <a href="#"><span class="strategy_title">【头像走一波】第98期：忍者赵云</span><span class="strategy_desc">快来围观萌萌哒Q版赵云头像吧~</span><span class="strategy_num">3406<span class="ico_read_num"></span></span><span class="strategy_time">06-21</span></a>
                        </div>
                    </li>
                </ul>
                <a href="javascript:void(0);" title="加载更多" class="i-more"></a>
            </div>
        </div>
        
        <!-- 底部导航start -->
        <div class="home_bottom">
            <ul class="clearfix">
                <li class="currentL">
                    <a href="./index.html">首页</a>
                </li>
                <li>
                    <a href="./pages/video.html">视频</a>
                </li>
                <li>
                    <a href="./pages/strategy.html">攻略</a>
                </li>
                <li>
                    <a href="./pages/match.html">赛事</a>
                </li>
            </ul>
    </div>
</body>

</html>
<script src="./js/swiper.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        loop: true, // 循环模式选项
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },
        autoplay: {
            delay: 1000,
            disableOnInteraction: false,
        },
    })
</script>